<template>
    <view class="Wrapper">
        <view class="row a-center">
            <view class="flex-1 d-flex f-column">
                <text class="black size32 bold500 line45">{{ pageData.staff.name }}</text>
                <text class="color_33 size28">{{ pageData.store.name }}</text>
                <text class="color_33 size28">{{ pageData.staff.group_name }}</text>
            </view>
            <image :src="$imgUrls(pageData.staff.head_img)" mode="aspectFill" class="head_img"></image>
        </view>
        <view class="row f-column m-top20">
            <view class="row a-center m-top20" @click.stop="$common.Tel(pageData.staff.phone)">
                <view class="iconfont icon-a-zu1879 black size26"></view>
                <text class="m-left20 size28">{{ pageData.staff.phone }}</text>
            </view>
            <view class="row m-top20 a-center" @click="openMap">
                <view class="iconfont icon-a-zu3947 black size32"></view>
                <text class="flex-1 m-left16 size28">{{ pageData.store.address }}</text>
            </view>
            <view class="row m-top20 a-center" @click="openMap">
                <view class="iconfont icon-fasong black size32"></view>
                <text class="flex-1 m-left16 size28">距离 {{ pageData.store.distance }}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['pageData'],
        data() {
            return {};
        },
        methods: {
            openMap() {
                let Obj = {
                    s_latitude: this.pageData.store.pointy,
                    s_longitude: this.pageData.store.pointx,
                    name: this.pageData.store.name,
                    address: this.pageData.store.address
                };
                this.$pop.openLocation(Obj);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 690rpx;
        padding: 24rpx;
        border: 1px solid #f1f1f1;
        margin: 24rpx auto;
        border-radius: 10rpx;
        .head_img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
            margin-left: 20rpx;
        }
    }
</style>
